<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/prewimg.css">
		<style type="text/css">
			html,
			body {
				background-color: #FFFFFF;
			}
			
			.mui-content {
				border: hidden;
				display: none;
				background-color: #FFFFFF;
			}
			
			.allcontent {
				width: 90%;
				margin-left: 5%;				
			}
			
			.allcontent p {
				color: black;
			}
			
			.showtoggle{
				display: none;
			}
			.money-div {
				color: #AFAFB2;
			}
			
			.pricesize{
				font-size: 85%;
			}
			.money-div .text1 {
				margin-left: 5%;
				color: red;
			}
			
			.money-div .text2 {
				float: right;
				color: #208AFE;
				font-size: 80%;
			}
			
			.area-div {
				display: flex;
				margin-top: 6px;
				font-size: 85%;
			}
			
			.area-div1 {
				width: 80%;
				color: black;
				margin-left: 5%;
			}
			
			.text-div {
				width: 90%;
				margin-left: 5%;
				color: #AFAFB2;
				font-size: 85% ;
				margin-top: 6px;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				padding: 3% 0;
				font-size: 100%;
				display: flex;
				flex-wrap: nowrap;
			}
			
			.fiends-div .friend-heddimg {
				width: 18%;
				margin-right: 5%;
				margin-left: 5%;
				height: 10%;
			}
			
			.fiends-div .agree-button {
				padding: 0;
				position: absolute;
				right: 3%;
				background-color: #077DFF;
				border: 0;
				padding: 0.5% 3%;
				font-size: 95%;
				color: #FFFFFF;
				z-index: 99;
			}
			
			.fiends-div .yagree-div {
				position: absolute;
				right: 5%;
				background-color: #FFFFFF;
				font-size: 80%;
				border-radius: 3px;
				color: #077DFF;
			}
			
			.card-div {
				display: none;
			}
			
			.conttext-div {
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}
			
			.conttext-div .div1 {
				display: block;
				width: 90%;
				padding: 0;
				list-style: none;
			}
			
			.div2 {
				color: #A9A9A9;
				font-size: 80%;
			}
			
			.div2 .img1 {
				width: 6%;
				position: absolute;
				right: 5%;
			}
			
			.div2 .img2 {
				width: 6%;
				position: absolute;
				margin-left: 3%;
			}
			
			.bottom-div {
				width: 100%;
				position: fixed;
				bottom: 0;
				display: flex;
				background-color: #208AFE;
			}
			
			.divv {
				width: 50%;
			}
			
			.bottom-div-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 90%;
			}
			
			.bottom-div-item1 {
				border-right: 1px solid #FFFFFF;
			}
			
			.bottom-div-item img {
				width: 12%;
				margin-right: 2%;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>

		<div class="mui-content" id="mui-content">
			<div class="mui-slider mui-slider-loop showtoggle" id="goodstype1">
				<div class="mui-slider-group">
					<div class="mui-slider-item mui-slider-item-duplicate"><img src="" data-preview-src="" data-preview-group="0" /></div>
				</div>
			</div>
			
			<div class="mui-slider mui-slider-loop showtoggle" id="goodstype2">
				<div class="mui-slider-group">
					<div class="mui-slider-item mui-slider-item-duplicate"><img src="" data-preview-src="" data-preview-group="1" /></div>
					<div class="mui-slider-item mui-slider-item-duplicate"><img src="" data-preview-src="" data-preview-group="1" /></div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			
			<div class="mui-slider mui-slider-loop showtoggle" id="goodstype3">
				<div class="mui-slider-group">
					<div class="mui-slider-item mui-slider-item-duplicate"><img src="" data-preview-src="" data-preview-group="2" /></div>
					<div class="mui-slider-item"><img src="" data-preview-src="" data-preview-group="2" /></div>
					<div class="mui-slider-item mui-slider-item-duplicate"><img src="" data-preview-src="" data-preview-group="2" /></div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<div class="allcontent">
				<p id="goodstext"></p>
				<div class="money-div pricesize">
					价格<text class='text1' id="price"></text>
					<text class='text2' id="typegood"></text>
				</div>

				<div class="area-div money-div">
					地址
					<div class="area-div1" id="areagood">

					</div>
				</div>
			</div>
			<div style="border-bottom: 1px solid #F7F7F7;margin-top: 10px;"></div>
			<div class="text-div">售卖人信息</div>
			<div class="fiends-div" id="fiends-div">

				<img src="" class="friend-heddimg" id="headmiggg" />
				<div class="conttext-div">
					<div class="div1" id="nickname">
					</div>
					<div class="div1 div2">
						手机号：<text id="tel"></text>
						<img src="../../images/tel.png" class="img1" id="imgg1" />
					</div>
					<div class="div1 div2">
						账号：<text id="card"></text>
						<img src="../../images/addf.png" class="img2" id="imgg2" />
					</div>
				</div>
			</div>

			<div class="bottom-div" id="bottom-div">
				<div class="divv">
					<div class="bottom-div-item bottom-div-item1">
						<img src="../../images/zixun.png" />
						<text>咨询</text>
					</div>
				</div>

				<div class="divv">
					<div class="bottom-div-item">
						<img src="../../images/buy.png" />
						<text>购买</text>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.previewimage1.js"></script>
		<script type="text/javascript">
			mui.previewImage();
			mui.init();
			mui.plusReady(function() {
				starbar();
				plus.navigator.setStatusBarStyle('dark');
				plus.nativeUI.showWaiting();
				
				var old_back = mui.back;
				//重写返回事件
				mui.back = function(){
	                //判断是否打开图片预览，如果是，就先关掉图片，否则直接关闭当前页面
	                if(document.querySelector(".mui-preview-in")){
	                    mui.previewImage().close();
	                }else{
	                	old_back();
						plus.navigator.setStatusBarStyle('light');
	                }	    			
	            }

				var viewwidth = document.body.clientWidth;
				document.getElementById('mui-content').style.paddingBottom = "-webkit-calc(" + viewwidth * 0.13 + "px)";
				document.getElementById('headmiggg').style.height = "-webkit-calc(" + viewwidth * 0.18 + "px)";
				document.getElementsByClassName('divv')[0].style.cssText = "padding: -webkit-calc(" + viewwidth * 0.03 + "px) 0";
				document.getElementsByClassName('divv')[1].style.cssText = "padding: -webkit-calc(" + viewwidth * 0.03 + "px)  0";
				
				var my_card = plus.storage.getItem("card");
				var ta_card = plus.webview.currentWebview().card;
				mui.ajax('https://www.lunyuwang.com/taskController/queryGoodDetail', {
					data: {
						lygood_Idd: plus.webview.currentWebview().idd,
						lyuser_Card: my_card,
						lyuser_Smbody: ta_card
					},
					crossDomain: true, //强制使用5+跨域
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					//processData: false,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(data) {
						var cardtext = data.goodUser;
						var goodtext = data.good;
						var goodimgs = goodtext.lygood_Img.split(",");
						var goodimgsbox = '';
						var telpng = document.getElementById('imgg1');
						var addfriendpng = document.getElementById('imgg2');
						var bottombar = document.getElementById('bottom-div');
						if(goodimgs.length == 1){
							goodimgsbox = document.getElementById('goodstype1');
							goodimgsbox.getElementsByTagName('img')[0].src = goodimgs;
							goodimgsbox.style.display = 'block';
						}else if(goodimgs.length == 2){
							goodimgsbox = document.getElementById('goodstype2');
							goodimgsbox.getElementsByTagName('img')[0].src = goodimgs[0];
							goodimgsbox.getElementsByTagName('img')[1].src = goodimgs[1];
							goodimgsbox.style.display = 'block';
						}else{
							goodimgsbox = document.getElementById('goodstype3');
							goodimgsbox.getElementsByTagName('img')[0].src = goodimgs[0];
							goodimgsbox.getElementsByTagName('img')[1].src = goodimgs[1];
							goodimgsbox.getElementsByTagName('img')[2].src = goodimgs[2];
							goodimgsbox.style.display = 'block';
						}
						document.getElementById('goodstext').textContent = goodtext.lygood_Text;
						document.getElementById('price').textContent = "￥"+goodtext.lygood_Price;
						document.getElementById('typegood').textContent = goodtext.lygood_Flag;
						document.getElementById('areagood').textContent = goodtext.lygood_Address;
						document.getElementById('headmiggg').src = cardtext.lyuser_FacePath;
						document.getElementById('nickname').textContent = cardtext.lyuser_NickName;
						document.getElementById('tel').textContent = cardtext.lyuser_Tel;
						document.getElementById('card').textContent = cardtext.lyuser_Card;
						
						if(data.flag == 1){
							addfriendpng.style.display = 'none';
						}else if(my_card == ta_card){
							telpng.style.display = 'none';
							addfriendpng.style.display = 'none';
							bottombar.style.display = 'none'
						}
						
						plus.nativeUI.closeWaiting();
						document.getElementById('mui-content').style.display = "block";
					},
					error: function(xhr, type, errorThrown) {
						mui.toast('发布异常!')
					}
				})

				document.getElementById("imgg1").addEventListener('tap',function(){
					event.stopPropagation();
		            var btnArray=['拨打','取消'];
		            var phone = document.getElementById('tel').value;
		            mui.confirm('是否拨打'+phone+'?','提示',btnArray,function(e){
		                if(e.index == 0){
		                    plus.device.dial(phone,false);
		                }
		            });
		        });

				document.getElementById('imgg2').addEventListener('tap', function(e) {
					event.stopPropagation();
					var ta_card = document.getElementById('card').textContent;
					e.detail.gesture.preventDefault();
					var btnArray = ['取消', '确定'];
					mui.prompt('请输入验证信息', '验证信息...', '添加好友', btnArray, function(e) {
						if (e.index == 1) {
							mui.ajax({
								url: 'https://www.lunyuwang.com/friendListController/clickAdd',
								data: {
									lyaddrequest_Text: e.value,
								    lyaddrequest_Card: plus.storage.getItem("card"),
								    lyaddrequested_Card: ta_card
								},
								async: true, //将false改为true
								crossDomain: true, //强制使用5+跨域
								dataType: 'json', //服务器返回json格式数据
								type: 'get', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								//processData: false,
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: function(data) {
									console.log(data.state)
									if(data.state == 1) {
										mui.toast('好友申请发送成功!')
									}

								},
								error: function(xhr, type, errorThrown) {
									//异常处理；
									mui.alert("失败了！")

								}
							})
						}
					},'div')
				})

				document.getElementById('fiends-div').addEventListener('tap', function(event) {
					mui.openWindow({
						url: "../goodfriend/addzhuhtml.html",
						id: "../goodfriend/addzhuhtml.html",
						extras: {
							card: document.getElementById('card').textContent
						}
					})
					event.stopPropagation();
				})

				mui('.bottom-div').on('tap', '.divv', function() {
					var textcontentt = this.getElementsByTagName('text')[0].textContent
					if(textcontentt == '咨询') {
						mui.alert('咨询')
					} else {
						mui.alert('购买')
					}
				})
			})
		</script>
	</body>

</html>